<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-12-14 22:14:55
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-05 19:49:14
-->
<template>
  <div class="history">
   <div class="content">
    <div class="left">
      <el-input placeholder="请输入工程关键字"></el-input>
        <!-- 设备树 -->
        <el-tree :data="edTree" 
        :props="props" 
        @node-click="handleNodeClick">
        </el-tree>
    </div>
    <div class="right">
       <div v-if="params.device_id">
          <video :src="device.video" 
              autoplay
              controls 
              loop
              style="display:block;width:90%;margin:0 auto">
              {{device.video}}
              </video>  
      </div>
       <div v-else class="notice">
          请选择工程下的设备
      </div>
        </div>
      </div>
    </div>
</template>

<script>
import { get } from "@/utils/request.js";
export default {
  data(){
    return {
     edTree:[],
     props:{
       label:"name",
       value:"id",
     },
     params:{},
     device:{}
    }
  },
  methods:{
    // 查询设备的详情信息
    FindDeviceDetails(){
     get("/device/findDeviceDetail",{id:this.params.device_id}).then(res=> {
       this.device = res.data;
     });
   },
  //树形节点点击事件
  handleNodeClick(data) {
    if(data.engineer_id){
    this.params = {
      ...this.params,
      engineer_id:data.engineer_id,
      device_id: data.id,
    };
    // 调用请求数据的方法
    this.FindDeviceDetails();
    }
  },
    // 查询工程设备树
    findEngineerDeviceTree() {
     get("/engineer/findEngineerDeviceTree").then((res) => {
       this.edTree = res.data;
     });
   },
  },
created() {
   // 查询工程设备树
   this.findEngineerDeviceTree();
 },
}
</script>
<style scoped>
.content {
  display: flex;
}
.left {
  width: 30%;
  border-right: 1px solid #b9b7b7;
  padding-right: 20px;
  margin-right: 20px;
}
.right {
  width: 70%;
}
.notice {
  height: 500px;
  line-height: 500px;
  text-align: center;
  font-size: 30px;
  color: #999;
}
</style>